var fiveChar = ['琴', '迪卢克', '七七', '莫娜', '刻晴', '温迪', '可莉', '达达利亚', '钟离', '阿贝多', '甘雨', '魈',
    '胡桃', '优菈', '枫原万叶', '神里绫华', '宵宫', '雷电将军', '珊瑚宫心海', '荒泷一斗', '申鹤', '八重神子', '神里绫人'];
var fourChar = ['安柏', '凯亚', '丽莎', '芭芭拉', '雷泽', '香菱', '北斗', '行秋', '凝光', '菲谢尔', '班尼特', '诺艾尔',
    '重云', '砂糖', '迪奥娜', '辛焱', '罗莎莉亚', '烟绯', '早柚', '九条裟罗', '托马', '五郎', '云堇'];
var threeChar = ['史莱姆', '大型史莱姆', '丘丘人', '丘丘暴徒', '丘丘王', '丘丘萨满', '深渊法师', '深渊使徒', '兽境幼兽',
    '兽境猎犬', '飘浮灵', '黯色空壳', '黑蛇骑士', '先遣队', '愚人众', '遗迹机关', '盗宝团', '野伏众', '海乱鬼', '骗骗花',
    '岩龙蜥', '深海龙蜥', '浮游水蕈兽'];
//var totalChar = fiveChar.concat(fourChar).concat(threeChar);
//console.log(totalChar);

var haveFive = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var haveFour = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var haveThree = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
//var haveTotal = haveFive.concat(haveFour).concat(haveThree);
//console.log(haveTotal);


//抽卡
var onceButton = document.getElementById('once_button');
var tentimesButton = document.getElementById('tentimes_button');
var remain = document.getElementById('remain');
var drawalert = document.getElementsByClassName('drawalert')[0];
var drawalertContent = document.getElementsByClassName('drawalert_content')[0];

var times = 0;
var fourBaodi = 0;
var fiveBaodi = 0;

function addLiAlert(charArray, cat, i) {
    var li = document.createElement('li');
    li.className = 'drawalert_item';
    var wrap = document.createElement('div');
    if (cat === 'five') {
        wrap.className = 'drawalert_item_wrap drawalert_item_wrap_five';
    } else if (cat === 'four') {
        wrap.className = 'drawalert_item_wrap drawalert_item_wrap_four';
    } else {
        wrap.className = 'drawalert_item_wrap';
    }
    var img = document.createElement('img');
    img.className = 'drawalert_item_img';
    img.src = './image/character/' + cat + '/' + charArray[i] + '.png';
    var pname = document.createElement('p');
    if (cat === 'five') {
        pname.className = 'drawalert_item_name drawalert_item_name_five';
    } else if (cat === 'four') {
        pname.className = 'drawalert_item_name drawalert_item_name_four';
    } else {
        pname.className = 'drawalert_item_name';
    }
    pname.innerHTML = charArray[i];
    wrap.appendChild(img);
    wrap.appendChild(pname);
    li.appendChild(wrap);
    drawalertContent.appendChild(li);
}

function drawOnce() {
    times++;
    fourBaodi++;
    fiveBaodi++;

    if (fiveBaodi === 90) { //5星保底
        fourBaodi = 0;
        fiveBaodi = 0;
        var char = -1;
        char = Math.floor(Math.random() * 23);
        haveFive[char]++;
        addLiAlert(fiveChar, 'five', char);
    } else if (fourBaodi === 10) { //4星保底
        fourBaodi = 0;
        var char = -1;
        var randomNum = Math.floor(Math.random() * 1000);
        if (randomNum < 994) { //4星
            char = Math.floor(Math.random() * 23);
            haveFour[char]++;
            addLiAlert(fourChar, 'four', char);
        } else { //5星
            fiveBaodi = 0;
            char = Math.floor(Math.random() * 23);
            haveFive[char]++;
            addLiAlert(fiveChar, 'five', char);
        }
    } else {
        var char = -1;
        var randomNum = Math.floor(Math.random() * 1000);
        if (randomNum < 943) { //3星
            char = Math.floor(Math.random() * 23);
            haveThree[char]++;
            addLiAlert(threeChar, 'three', char);
        } else if (randomNum < 994) { //4星
            fourBaodi = 0;
            char = Math.floor(Math.random() * 23);
            haveFour[char]++;
            addLiAlert(fourChar, 'four', char);
        } else { //5星
            fourBaodi = 0;
            fiveBaodi = 0;
            char = Math.floor(Math.random() * 23);
            haveFive[char]++;
            addLiAlert(fiveChar, 'five', char);
        }
    }
}

function countChar(type) {
    var count = 0;
    switch (type) {
        case 'five':
            for (var i = 0; i < haveFive.length; i++) {
                count += haveFive[i];
            }
            break;
        case 'four':
            for (var i = 0; i < haveFour.length; i++) {
                count += haveFour[i];
            }
            break;
        case 'three':
            for (var i = 0; i < haveThree.length; i++) {
                count += haveThree[i];
            }
            break;
    }
    return count;
}

var totaltimes = 1000;
remain.innerHTML = totaltimes - times;

onceButton.addEventListener('click', function () {
    drawalert.style = 'display: none';
    if (times < totaltimes) {
        drawalertContent.innerHTML = '';
        drawOnce();
        remain.innerHTML = totaltimes - times;
        drawalert.style = 'display: block';
    } else {
        var five = countChar('five');
        var four = countChar('four');
        var three = countChar('three');
        alert('抽卡次数用尽！请刷新重来。\n您本次抽卡共有五星' + five + '张，四星'+ four + '张，三星' + three + '张。');
    }
});

tentimesButton.addEventListener('click', function () {
    drawalert.style = 'display: none';
    if (times < totaltimes) {
        drawalertContent.innerHTML = '';
        drawalert.style = 'display: block';
        var i = 0;
        /*
        function oneByOne() {
            if(i >= 10) {
                return;
            }
            drawOnce();
            remain.innerHTML = totaltimes - times;
            i++;
            setTimeout(oneByOne, 200);
        }
        oneByOne();
        */
        for (var j = 0; j < 10; j++) {
            drawOnce();
            remain.innerHTML = totaltimes - times;
        }
    } else {
        var five = countChar('five');
        var four = countChar('four');
        var three = countChar('three');
        alert('抽卡次数用尽！请刷新重来。\n您本次抽卡共有五星' + five + '张，四星'+ four + '张，三星' + three + '张。');
    }
})

var drawalertCrossButton = document.getElementById('drawalert_cross_button');

drawalertCrossButton.addEventListener('click', function () {
    drawalert.style = 'display: none';
});

drawalert.addEventListener('click', function () {
    drawalert.style = 'display: none';
})


//卡牌一览
var cardpage = document.getElementsByClassName('cardpage')[0];
var cardButton = document.getElementById('card_button');
var cardpageCrossButton = document.getElementById('cardpage_cross_button');
var cardpadeChar = document.getElementsByClassName('cardpade_char')[0];

var cardpageTotalButton = document.getElementById('cardpage_total_button');
var cardpageFiveButton = document.getElementById('cardpage_five_button');
var cardpageFourButton = document.getElementById('cardpage_four_button');
var cardpageThreeButton = document.getElementById('cardpage_three_button');
var cardpageAllContentButton = document.getElementsByClassName('cardpage_content_button');

function addLi(charArray, haveArray, cat) {
    for (var i = 0; i < charArray.length; i++) {
        var li = document.createElement('li');
        li.className = 'cardpage_char_item';
        var wrap = document.createElement('div');
        if (haveArray[i] === 0) {
            wrap.className = 'cardpage_char_wrap cardpage_char_wrap_none';
        } else {
            wrap.className = 'cardpage_char_wrap';
        }
        var img = document.createElement('img');
        img.className = 'cardpage_char_img';
        img.src = './image/character/' + cat + '/' + charArray[i] + '.png';
        var pname = document.createElement('p');
        pname.className = 'cardpage_char_name';
        pname.innerHTML = charArray[i];
        var pnum = document.createElement('p');
        pnum.className = 'cardpage_char_num';
        pnum.innerHTML = haveArray[i];
        wrap.appendChild(img);
        wrap.appendChild(pname);
        wrap.appendChild(pnum);
        li.appendChild(wrap);
        cardpadeChar.appendChild(li);
    }
}

cardButton.addEventListener('click', function () {
    clearCardpageAllContentButtonClass();
    cardpageTotalButton.className = 'cardpage_content_button cardpage_content_button_active'
    //清空原本的子元素
    cardpadeChar.innerHTML = '';
    addLi(fiveChar, haveFive, 'five');
    addLi(fourChar, haveFour, 'four');
    addLi(threeChar, haveThree, 'three');
    cardpage.style = 'display: block';
});

cardpageCrossButton.addEventListener('click', function () {
    cardpage.style = 'display: none';
});




function clearCardpageAllContentButtonClass() {
    for (var i = 0; i < cardpageAllContentButton.length; i++) {
        cardpageAllContentButton[i].className = 'cardpage_content_button';
    }
}

cardpageTotalButton.addEventListener('click', function () {
    clearCardpageAllContentButtonClass();
    this.className = 'cardpage_content_button cardpage_content_button_active'
    //清空原本的子元素
    cardpadeChar.innerHTML = '';
    addLi(fiveChar, haveFive, 'five');
    addLi(fourChar, haveFour, 'four');
    addLi(threeChar, haveThree, 'three');
});

cardpageFiveButton.addEventListener('click', function () {
    clearCardpageAllContentButtonClass();
    this.className = 'cardpage_content_button cardpage_content_button_active'
    //清空原本的子元素
    cardpadeChar.innerHTML = '';
    addLi(fiveChar, haveFive, 'five');
});

cardpageFourButton.addEventListener('click', function () {
    clearCardpageAllContentButtonClass();
    this.className = 'cardpage_content_button cardpage_content_button_active'
    //清空原本的子元素
    cardpadeChar.innerHTML = '';
    addLi(fourChar, haveFour, 'four');
});

cardpageThreeButton.addEventListener('click', function () {
    clearCardpageAllContentButtonClass();
    this.className = 'cardpage_content_button cardpage_content_button_active'
    //清空原本的子元素
    cardpadeChar.innerHTML = '';
    addLi(threeChar, haveThree, 'three');
});
